<!-- eslint-disable vue/no-mutating-props -->
<template>
	<view>
		<scroll-view scroll-y="true" :class="[isFlag ? 'tree-wrapp' : '']">
			<view class="tree-item" v-for="(item, index) in tree" :key="index"
				:style="{ margin: (index == tree.length - 1) ? '0' : '' }">
				<view class="head" v-if="item.id" @click.stop="changeShow(item)">
					<image src="/static/images/down_pie.png" :class="isOpen(item.id) ? 'rt45' : ''" mode="scaleToFill"
						class="left-icon" v-if="item.children && item.children.length > 0"></image>
					<view style="width: 22rpx;height: 22rpx;margin-right: 16rpx;" v-else></view>
					<!-- <view class="txt"  v-if="item.type === 2  && index === 0 && item.all">
						<text >{{ item.all }}</text>
					</view> -->
					<view class="txt">
						<text v-if="!isSearch">{{ item.name }}</text>
						<rich-text v-else :nodes="actSearch(item)"></rich-text>
						<text v-if="item.type == 1 || item.showTotal">({{ item.total || 0 }})</text>
					</view>
					<view style="width: 100rpx;height: 60rpx;display: flex;align-items: center;"
						@click.stop="isSelect(item)">
						<view :class="[item.isOpen ? 'right-check right-bg' : 'right-check']">
						</view>
					</view>
				</view>
				<view class="content" v-if="item.children && item.children.length > 0" v-show="isOpen(item.id)">
					<treeNodesE :tree="item.children" :isSearch="isSearch" :defaultId="defaultId" :keywords="keywords"
						:expandedIds="expandedIds" @node-click="$emit('node-click', $event)">
					</treeNodesE>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import treeNodesE from './tree-nodesE.vue';
export default {
	name: 'treeNodesE',
	// componentName: 'treeNodes',
	components: {
		treeNodesE
	},
	props: {
		tree: {
			type: Array,
			default: () => []
		},
		expandedIds: {
			type: Array,
			default: () => []
		},
		keywords: {
			type: String,
			default: ''
		},
		isSearch: {
			type: Boolean,
			default: false
		},
		isFlag: {  // 判断是否为选择层站
			type: Boolean,
			default: false
		},
		defaultId: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			// expandedIds:[],
			checkArr: [],
			first: true,
		};
	},
	watch: {
	},
	created() {
		if (this.expandedIds.length && this.expandedIds[0].id != 0) { // 排除整梯子
			this.tree.forEach(item => {
				// 选中最后一级别
				if (this.expandedIds[this.expandedIds.length - 1] == item.id) {
					item.isOpen = true;
					this.$forceUpdate();
					this.$emit('node-click', item);
				}
			});
			return;
		}
		if (this.defaultId) {
			this.expandedIds = [this.defaultId];
		}
	},
	computed: {

	},
	methods: {
		// 搜索关键词高亮
		actSearch(item) {
			let str = item.name;
			let resultStrs = str.replaceAll(this.keywords, '<span style=\'color:#0091ff;\'>' + this.keywords + '</span>');
			return resultStrs;
		},
		isOpen(id) {// 判断节点id在不在数组中
			return this.expandedIds.includes(id);
		},
		changeShow(item) {
			if (item.children && item.children.length) {// 判断是否有子级
				let index = this.expandedIds.indexOf(item.id);
				// console.log("父级ii", this.expandedIds, item.id)
				if (index != -1) {
					this.expandedIds.splice(index, 1);
				} else {
					this.expandedIds.push(item.id);
				}
			}
			this.$forceUpdate();
		},
		isSelect(item) {
			this.tree.forEach(row => {
				row.isOpen = false;
			});
			let openstatus = item.isOpen;
			item.isOpen = !openstatus;// 是否勾选
			this.$forceUpdate();
			this.$emit('node-click', item);
		}
	}
};
</script>

<style scoped lang="scss">
@mixin animate2 {
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.tree-wrapp {
	// height: 60vh;
}

.tree-item {
	padding: 10rpx 0rpx;
	padding-left: 10rpx;
	background-color: #fff;
	margin: 20rpx 0;

	.head {
		display: flex;
		align-items: center;
		line-height: 60rpx;

		.txt {
			font-size: 30rpx;
			color: #222;
			flex: 1;
		}
	}

	.right-ifon {
		margin-right: 30rpx;
		width: 30rpx;
		height: 30rpx;
		margin-left: 12rpx;
		transform: rotate(-90deg);
	}

	.right-check {
		// margin-right: 30rpx;
		margin: auto;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 2rpx #CCCCCC solid;
	}

	.right-bg {
		// background-color: #0091FF;
		border: none;
		background: url("");
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.left-icon {
		margin-right: 16rpx;
		width: 22rpx;
		height: 22rpx;
		@include animate2;
		transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);

		&.rt45 {
			transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-o-transform: rotate(0deg);
		}
	}

	.content {
		padding-left: 40rpx;
	}
}
</style>
